<template>
  <div>
    <DateTabSelector v-model="dateRange" />
    <el-row :gutter="0" style="margin-top: -10px;">
      <el-col :span="8">
        <div class="statistic-card" @click="goToH3Yun">
          <el-statistic :value="info.warnTotal">
            <template #title>
              <div class="title">异常数</div>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="statistic-card" @click="goToH3Yun">
          <el-statistic :value="info.alarmTotal">
            <template #title>
              <div class="title">超标数</div>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="statistic-card" @click="goToH3Yun">
          <el-statistic :value="info.total">
            <template #title>
              <div class="title">预警总数</div>
            </template>
          </el-statistic>
        </div>
      </el-col>
    </el-row>
    <el-row style="margin-top: -25px;">
      <el-col :span="8">
        <div class="statistic-card" @click="goToH3Yun">
          <el-statistic :value="info.handlerRate || 0" :precision="0">
            <template #title>
              <div class="title">预警处置率</div>
            </template>
            <template #suffix>
              <div class="percent">%</div>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="statistic-card" @click="goToH3Yun">
          <el-statistic :value="info.transmissionRate" :precision="0">
            <template #title>
              <div class="title">传输率</div>
            </template>
            <template #suffix>
              <div class="percent">%</div>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="statistic-card" @click="goToH3Yun">
          <el-statistic :value="info.effectiveRate" :precision="0">
            <template #title>
              <div class="title">有效率</div>
            </template>
            <template #suffix>
              <div class="percent">%</div>
            </template>
          </el-statistic>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
  import moment from 'moment'
  import {getEventCount} from '@/api/h3yun'
  import { onMounted, ref, watch } from 'vue'
  import DateTabSelector from './DateTabSelector.vue'

  //默认为今日
  const dateRange: any = ref([
    moment().startOf('day').format('YYYY-MM-DD 00:00:00'),
    moment().endOf('day').format('YYYY-MM-DD 23:59:59'),
    'today'
  ])

  const props = defineProps<{
    areaCode: string,
    lastAlarmData: Object
  }>()
  const info: any = ref({})

  watch(() => props.areaCode, () => {
    setTimeout(() => {
      initData()
    }, 200)
  }, { deep: true, immediate: true })

  watch(() => props.lastAlarmData, () => {
    initData()
  })
  
  watch(() => dateRange.value, () => {
    initData()
  })

  // 跳转到氚云系统
  const goToH3Yun = () => {
    window.open('https://www.h3yun.com/application/D001729axy20rsfk5k9fndomy/D001729AlarmEvent')
  }

  const initData = async () => {
    let res = await getEventCount(props.areaCode, dateRange.value[0], dateRange.value[1])
    info.value = res.data
  }
</script>

<style scoped lang="scss">
.el-statistic {
  --el-statistic-content-font-size: 28px;
  --el-statistic-content-color: #fff;
}

.statistic-card {
  padding: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  cursor: pointer;

  .title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
  }
  .percent {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
  }
}
</style>